import React, { Component } from 'react';
import { connect } from 'dva';
import {
  Cascader,
  DatePicker,
  Select,
  Card,
  Form,
  Input,
  Tooltip,
  Icon,
  TreeSelect,
  Row,
  Col,
  Checkbox,
  Button,
} from 'antd';
import style from './CompanyBasicInfo.less';

const Option = Select.Option;
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
const treeData = [
  {
    title: '上海证券报',
    value: '1',
    key: '1',
  },
  {
    title: '证券时报',
    value: '2',
    key: '2',
  },
  {
    title: '中国证券报',
    value: '3',
    key: '3',
  },
  {
    title: '证券日报',
    value: '4',
    key: '4',
  },
  {
    title: '巨潮网(www.cninfo.com.cn)',
    value: '5',
    key: '5',
  },
  {
    title: '上海证券交易所(www.sse.com.cn)',
    value: '6',
    key: '6',
  },
  {
    title: '深圳证券交易所(www.szse.cn)',
    value: '7',
    key: '7',
  },
  {
    title: '香港联交所披露易(www.hkexnews.hk)',
    value: '8',
    key: '8',
  },
];
function onChange(value) {
  console.log(value);
}
class CompanyBasicInfo extends React.Component {
  state = { cascadeData: [] };

  handleSubmit = e => {
    const { dispatch } = this.props;
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, params) => {
      if (!err) {
        console.log('Received params of form: ', params);
        let values = { ...params };
        // 行业分类一： cmp.first_industry_name, cmp.second_industry_name
        let firstIndustry = values.first_industry_name;
        if (firstIndustry && firstIndustry.length > 0) {
          values.first_industry_name = firstIndustry.shift() || '';
          values.second_industry_name = firstIndustry.shift() || '';
        } else {
          values.first_industry_name = '';
          values.second_industry_name = '';
        }
        // 行业分类二： cmp.minor_first, cmp.minor_sec
        let secondIndustry = values.minor_first;
        if (secondIndustry && secondIndustry.length > 0) {
          values.minor_first = secondIndustry.shift() || '';
          values.minor_sec = secondIndustry.shift() || '';
        } else {
          values.minor_first = '';
          values.minor_sec = '';
        }

        dispatch({
          type: 'companyBasicInfo/submitInfo',
          payload: {
            ...values,
          },
        });
      }
    });
  };

  componentDidMount() {
    // 获取行业数据
    this.props.dispatch({
      type: 'companyBasicInfo/getIndustryData',
    });
    // 获取公司基本信息
    this.props.dispatch({
      type: 'companyBasicInfo/getBasicInfo',
    });
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    const { industry } = nextProps;
    if (industry && Object.keys(industry).length > 0) {
      let keys = Object.keys(industry);
      // 过滤掉_id属性
      keys = keys.filter(key => {
        return key != '_id';
      });
      const cascadeData = keys.map(key => {
        return {
          value: key,
          label: key,
          children: industry[key].map(subKey => ({
            value: subKey,
            label: subKey,
          })),
        };
      });
      return {
        cascadeData,
      };
    }
    return null;
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const { cmp } = this.props;
    const { cascadeData } = this.state;
    // 行业分类一： cmp.first_industry_name, cmp.second_industry_name
    // 行业分类二： cmp.minor_first, cmp.minor_sec
    let industryType1 = [];
    let industryType2 = [];

    cmp.first_industry_name && industryType1.push(cmp.first_industry_name);
    cmp.first_industry_name &&
      cmp.second_industry_name &&
      industryType1.push(cmp.second_industry_name);

    cmp.minor_first && industryType2.push(cmp.minor_first);
    cmp.minor_first && cmp.minor_sec && industryType2.push(cmp.minor_sec);

    // const company1 = JSON.parse(sessionStorage.getItem('LOGIN_INFO'));
    // const fullName = company ? company1.company_name : '';
    // const shortName = company ? company1.stock_name : '';
    // console.log('公司基本信息：', company);

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    const tProps = {
      treeData,
      // value: this.state.value,
      // onChange: this.onChange,
      treeCheckable: true,
      showCheckedStrategy: SHOW_PARENT,
      searchPlaceholder: '请选择披露媒体',
      style: {
        width: 300,
      },
    };
    return (
      <Card>
        <div className={style.title}>
          {/*<div className={style.kk}/>*/} <span className={style.text}>公司基本信息</span>
          <Button
            className={style.btn}
            onClick={this.handleSubmit}
            type="primary"
            htmlType="submit"
          >
            保存
          </Button>
        </div>
        <Form onSubmit={this.handleSubmit}>
          <Row type="flex" justify="space-around" align="top">
            <Col span={11}>
              <Form.Item {...formItemLayout} label="公司中文名称：">
                {cmp.chi_name}
                {/*getFieldDecorator('chinese_name', {
                  initialValue: fullName,
                  rules: [
                    {
                      required: true,
                      message: '请填写公司中文名称！',
                      whitespace: true,
                    },
                  ],
                })(<Input />)*/}
              </Form.Item>
              <Form.Item {...formItemLayout} label="公司的外文名称：">
                {getFieldDecorator('eng_name', {
                  initialValue: cmp.eng_name,
                  /*rules: [
                    {
                      required: true,
                      message: '请填写公司的外文名称！',
                      whitespace: true,
                    },
                  ],*/
                })(<Input />)}
              </Form.Item>
              <Form.Item {...formItemLayout} label="公司的法定代表人：">
                {getFieldDecorator('legal_repr', {
                  initialValue: cmp.legal_repr,
                  /*rules: [
                    {
                      required: true,
                      message: '请填写公司的法定代表人！',
                      whitespace: true,
                    },
                  ],*/
                })(<Input />)}
              </Form.Item>
              <Form.Item {...formItemLayout} label="公司注册地址：">
                {getFieldDecorator('reg_addr', {
                  initialValue: cmp.reg_addr,
                  /* rules: [
                    {
                      required: true,
                      message: '请填写公司注册地址！',
                      whitespace: true,
                    },
                  ], */
                })(<Input />)}
              </Form.Item>
              <Form.Item {...formItemLayout} label="公司办公地址：">
                {getFieldDecorator('office_addr', {
                  initialValue: cmp.office_addr,
                  /* rules: [
                    {
                      required: true,
                      message: '请填写公司办公地址！',
                      whitespace: true,
                    },
                  ], */
                })(<Input />)}
              </Form.Item>
              <Form.Item {...formItemLayout} label="公司网址：">
                {getFieldDecorator('website', {
                  initialValue: cmp.website,
                  /*rules: [
                    {
                      required: true,
                      message: '请填写公司网址！',
                      whitespace: true,
                    },
                    { type: 'url', message: '请填写合法的网址!' },
                  ],*/
                })(<Input />)}
              </Form.Item>
              {/* <Form.Item {...formItemLayout} label="披露媒体：">
                  {getFieldDecorator('disclosure_media_id', {
                    rules: [
                      {
                        required: true,
                        message: '请选择披露媒体！',
                      },
                    ],
                  })(<TreeSelect {...tProps} />)}
                </Form.Item>
                */}

              <Form.Item {...formItemLayout} label="行业分类1：">
                {getFieldDecorator('first_industry_name', {
                  initialValue: industryType1,
                  /* rules: [
                    {
                      required: true,
                      message: '请填写行业分类1！',
                      whitespace: true,
                    },
                  ], */
                })(
                  <Cascader
                    changeOnSelect
                    onChange={onChange}
                    options={cascadeData}
                    placeholder="请选择"
                  />
                )}
              </Form.Item>
              <Row className={style.redTip} offset={3}>
                <Col span={21} offset={3}>
                  ！本公司主营业务所属行业是按照证监会行业分类指引划分
                </Col>
              </Row>
            </Col>
            <Col span={11}>
              <Form.Item {...formItemLayout} label="公司的中文简称：">
                {cmp.chi_name_abbr}
                {/*getFieldDecorator('chinese_short_name', {
                  initialValue: shortName,
                  rules: [{ required: true, message: '请填写中文简称!', whitespace: true }],
                })(<Input />)*/}
              </Form.Item>

              <Form.Item {...formItemLayout} label="公司的外文名称缩写：">
                {getFieldDecorator('eng_name_abbr', {
                  initialValue: cmp.eng_name_abbr,
                  //rules: [{ required: true, message: '请填写公司的外文名称缩写！', whitespace: true }],
                })(<Input />)}
              </Form.Item>

              <Form.Item {...formItemLayout} label="公司的注册资本：">
                {getFieldDecorator('registered_capital', {
                  initialValue: cmp.registered_capital,
                  //rules: [{ required: true, message: '请填写公司的注册资本!', whitespace: true }],
                })(<Input />)}
              </Form.Item>

              <Form.Item {...formItemLayout} label="注册地址的邮政编码：">
                {getFieldDecorator('reg_zip_code', {
                  initialValue: cmp.reg_zip_code,
                  //rules: [{ required: true, message: '请填写注册地址的邮政编码!', whitespace: true }],
                })(<Input />)}
              </Form.Item>
              <Form.Item {...formItemLayout} label="办公地址的邮政编码：">
                {getFieldDecorator('office_zip_code', {
                  initialValue: cmp.office_zip_code,
                  //rules: [{ required: true, message: '请填写办公地址的邮政编码!', whitespace: true }],
                })(<Input />)}
              </Form.Item>
              {/*
                <Form.Item {...formItemLayout} label="执照注册号：">
                  {getFieldDecorator('license_number', {
                    rules: [{ required: true, message: '请填写执照注册号!' }],
                  })(<Input />)}
                </Form.Item>
                <Form.Item {...formItemLayout} label="登记日期：">
                  {getFieldDecorator('registration_time', {
                    rules: [{ required: true, message: '请填写登记日期!' }],
                  })(<DatePicker />)}
                </Form.Item>
              */}

              <Form.Item {...formItemLayout} label="电子信箱：">
                {getFieldDecorator('email', {
                  initialValue: cmp.email,
                  rules: [
                    //{ required: true, message: '请填写电子信箱!', whitespace: true },
                    { type: 'email', message: '请填写合法的电子信箱!' },
                  ],
                })(<Input />)}
              </Form.Item>

              <Form.Item {...formItemLayout} label="行业分类2：">
                {getFieldDecorator('minor_first', {
                  initialValue: industryType2,
                  /* rules: [
                    {
                      required: true,
                      message: '请填写行业分类2！',
                      whitespace: true,
                    },
                  ], */
                })(
                  <Cascader
                    changeOnSelect
                    onChange={onChange}
                    options={cascadeData}
                    placeholder="请选择"
                  />
                )}
              </Form.Item>
              <Row className={style.redTip} offset={3}>
                <Col span={21} offset={3}>
                  ！本公司非主营业务所属行业或感兴趣的行业
                </Col>
              </Row>
            </Col>
          </Row>
        </Form>
      </Card>
    );
  }
}

const mapStateToProps = state => ({
  industry: state.companyBasicInfo.industry,
  cmp: state.companyBasicInfo.company,
});
export default connect(mapStateToProps)(Form.create({ name: 'register' })(CompanyBasicInfo));
